<template>
  <div>
    <div class="key normal"
      :class="[isSelected ? 'active' : '', isContained ? '' : 'not-contains']"
    >
      {{ sku.name }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    sku: {},
    k_s: '',
    selectArray: [],
    containsArray: [],
    listArray: []
  },
  computed: {
    isSelected: function() {
      if (this.selectArray === 'undefined' || this.selectArray === null) {
        return false;
      }
      for (var i = 0; i < this.selectArray.length; i++) {
        // eslint-disable-next-line
        if (this.selectArray[i].k_s == this.k_s && this.selectArray[i].id == this.sku['id']) {
          return true;
        }
      }
      return false;
    },
    isContained: function() {
      if (this.containsArray === 'undefined' || this.containsArray === null) {
        return true;
      }

      for (var i = 0; i < this.containsArray.length; i++) {
        const item = this.containsArray[i];
        if (item[this.k_s] === this.sku.id) {
          console.log('contained true');
          return true;
        }
      }
      return false;
    }
  }
};
</script>

<style lang="scss">

</style>
